<template>
  <div style="width: 100%" class="fileBox">
    <div ref="toolbar" class="toolbar" style="width:80%;margin:0 auto;" />
    <div ref="editor" class="text" style="width:80%;height: 70%;margin:0 auto;border:1px solid #ccc" />
    <div
      style="width: 100%; height: 50px; line-height: 50px; text-align: center"
    >
      <el-button
        type="primary"
        size="small"
        @click="saveWord"
      ><span>保存协议</span></el-button>
    </div>
  </div>
</template>

<script>
import wangeditor from 'wangeditor'
import { uploadWord, getWordList } from '@/api/folder'
import { getInfo, getRoles } from '@/api/user'
import { getToken } from '@/utils/auth'
export default {
  components: {
    wangeditor
  },
  data() {
    return {
      editor: null,
      info: '',
      html: ''
    }
  },
  mounted() {
    this.configEditer()
  },
  created() {
    this.getUserInfo()
    this.getWord()
  },
  methods: {
    configEditer() {
      this.editor = new wangeditor(this.$refs.toolbar, this.$refs.editor)
      this.editor.config.pasteFilterStyle = false
      // this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
      // this.editor.config.uploadImgServer =
      //   "http://otp.cdinfotech.top/file/upload_images"; // 配置服务器端地址
      // this.editor.config.uploadImgHeaders = {}; // 自定义 header
      // this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
      // this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
      // this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
      // this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
      this.editor.config.zIndex = 0
      // 配置菜单
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        // "link", // 插入链接
        // "list", // 列表
        'justify', // 对齐方式
        'quote', // 引用
        // "emoticon", // 表情
        // "image", // 插入图片
        // "table", // 表格
        // "video", // 插入视频
        // "code", // 插入代码
        'undo', // 撤销
        'redo', // 重复
        'fullscreen' // 全屏
      ]
      this.editor.config.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          // result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
          // console.log(result.data[0].url)
          // insertImg()为插入图片的函数
          // 循环插入图片
          // for (let i = 0; i < 1; i++) {
          // console.log(result)
          const url = 'http://otp.cdinfotech.top' + result.url
          insertImg(url)
          // }
        }
      }
      this.editor.config.onchange = (html) => {
        this.info = html // 绑定当前逐渐地值
      }
      this.editor.create()
    },
    saveWord() {
      new Promise((resolve, reject) => {
        uploadWord({ html: this.info }).then((response) => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        })
      })
      console.log(this.info)
    },
    getWord() {
      new Promise((resolve, reject) => {
        getWordList().then((response) => {
          this.html = response.data[0].html
          this.editor.txt.html(this.html)
        })
      })
    },
    // 获取当前用户的登录信息
    getUserInfo() {
      new Promise((resolve, reject) => {
        getInfo().then((response) => {
          // this.username = response.data.name; //当前登录用户的姓名
          this.userPermissions = response.data.per // 当前登录用户权限数组
          for (let i = 0; i < this.userPermissions.length; i++) {
            if (this.userPermissions[i] == 'update power') {
              this.is_admin = true
            }
          }
        })
      })
    }
  }
}
</script>

<style>
.fileBox {
  margin: 10px;
}

.fileBox .operation {
  padding: 10px;
  margin: 10px;
  width: 100%;
  margin-right: 10px;
  display: inline-block;
  -webkit-box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
}
</style>
